<template>
	<view class="">
		<navtap @showmask="showmask"></navtap>
				<!-- {{condition}} -->
		<view class="flex flex-wrap">
			<gooditem v-for="(item,index) in goodlist" :key="index" :item="item" ></gooditem>

		</view>
<!-- 
		<view class="flex fixed bg-white justify-around ">
			<view v-for="(item,index) in tabArr" :key="index" class="flex align-center" @click="loadData(item)">
				<view>{{item.name}}</view>
				<u-line v-if="index<tabArr.length-1" direction="col" length="100upx" color="gray" margin="0 50upx">
				</u-line>
			</view>
		</view>
 -->
		<view class="">
			<!-- 侧边栏 -->
			<u-popup :show="show" @close="close" mode="left" closeable>
				<view class="pop-cent">
					<view class="" v-for="(item,index) in classifyData" :key="index">
						<u-cell :title="item.bname" isLink>
							<text slot="value" class="u-slot-value">{{item.length}}</text>
						</u-cell>
						<view v-if="index==0">
							<view class="padding-sm " @click="listshow=!listshow">
								口味筛选
							</view>
							<u-cell-group v-if="listshow" v-for="(itm,idx) in item.list" :key="idx">
								<u-cell @click="handleList(itm,1)" :title="itm.tname" isLink></u-cell>
							</u-cell-group>
							<view class="padding-sm " @click="sceneshow=!sceneshow">
								场景筛选
							</view>
							<u-cell-group v-if="sceneshow" v-for="(itm1,idx1) in item.scene" :key="itm1.tid">
								<u-cell  @click="handleList(itm1,2)" :title="itm1.tname" isLink></u-cell>
							</u-cell-group>
						</view>
					</view>

				</view>
			</u-popup>
			
		<!-- 	{{count}} -->

		</view>
		
		<bottomTabbar @loaddata="loadData"></bottomTabbar>
		
		<!-- data -->
		
	</view>
</template>

<script>
	import test from '../../componets/test'
	import gooditem from '../../componets/goodItem.vue'

	export default {
		data() {
			return {

				number: 0,
				goodlist: null,
				page: 0,
				tabArr: [{
						name: '分类',
						bcid: '',
						target: ''
					},
					{
						name: '蛋糕',
						bcid: '1',
						target: '/pages/cake'
					},
					{
						name: '面包',
						bcid: '11',
						target: '/pages/bread'
					},
					{
						name: '小食',
						bcid: '6',
						target: '/pages/food'
					},
					{
						name: '购物车',
						bcid: '0',
						target: '/pages/cart'
					}
				],
				bcid: 1,
				show: false,
				classifyData: [],
				listshow: false,
				sceneshow: false,
				// condition:{
				// 	"bcid":1
				// }
			}
		},
		computed:{
			// count(){
			// 	return this.$store.state.count
			// }
			condition(){
				return  this.$store.state.condition.cond;
			}
		},
		components: {
			test,
			gooditem,

		},
		methods: {
			// loaddata(e){
			// 	// console.log(111);
			// 	console.log(e);
			// },
			handleGo(index) {
				// navigateto 跟 redirectTo 差别就是前者是新打开一个窗口，后面那个是直接在原有页面打开，区别在于前者可以back,后者不行
				uni.navigateTo({
					url: `../detail/detail?index:${index}`
				})

			},
			showmask(e){
				console.log(e);
				this.show=true
			},


			getCakeData() {
				let skip = this.page * 8
				
				let wh = JSON.stringify(this.condition)
				console.log(wh);
				let url = `/1.1/classes/goods?where=${wh}&limit=8&skip=${skip}`
				this.$get(url).then(res => {
					console.log(res)

					if (res.results.length) {
						this.page++
						// console.log(this.page)
						if (this.goodlist) {
							this.goodlist = [
								...this.goodlist,
								...res.results
							]
						} else {
							this.goodlist = res.results
						}
						setTimeout(() => {
							uni.stopPullDownRefresh()
						}, 1000)



						return
					} else {
						uni.showToast({
							title: '无数据了',
							icon: "none"
						})
					}

				})

			},
			reloadData(){
				this.goodlist = null
				this.page = 0
				this.getCakeData()
			},
			
			loadData(item) {
				let {
					bcid,
					target
				} = item
				if (bcid) {
					this.goodlist = null
					this.page = 0
					// this.$store.state.condition.cond.bcid = Number(bcid)
					this.$store.commit("changeCondition",{
						bcid:Number(bcid)
					})
					this.getCakeData()
				}

				// if (!bcid && !target) {
				// 	this.show = true
				// }
			},
			close() {
				this.show = false
			},
			handleList({bid,tid},type){
				
				var obj = {bcid:bid}
				type==1?obj.fid=tid:obj.sid=tid
				this.$store.commit("changeCondition",obj)
				this.reloadData()
			}
			
		},
		/* onload相当于vue的mounted onhide就差不多相当于destory,但是有一点,当你第一次加载进一个页面先执行load,在执行show,但是当你第二次切回来就只会执行show了,load就差不多相当于第一次加载 */
		onLoad(options) {
			this.getCakeData()
			this.$get('/1.1/classes/classify').then(res => {
				// console.log(res.results);
				this.classifyData = res.results
				var second = 0
				for(let i =0;i<this.classifyData.length;i++){
					second +=300
					// console.log(i)
					setTimeout(() => {
						this.$get(`/1.1/classes/goods?where={"bcid":${this.bcid}}`).then(res => {
							// console.log(this.bcid)
							// console.log(res.results);
							this.$set(this.classifyData[i], "length", res.results.length)
							switch(i){
								case 0:
									this.bcid = 11
									break
								case 1:
									this.bcid = 6
									break
								case 2:
									this.bcid = 5
									break
							
							}
							
						})
					
					}, second)
				}
			})

			
		

			
		},
		onReachBottom() {
			// console.log(11)
			this.getCakeData()
		},
		onPullDownRefresh() {
			this.reloadData()
		},
		onHide() {

		},
		onShow() {

		},
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 120upx;
		padding-top: 120upx;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
	}

	.pop-cent {
		margin-top: 120upx;
		width: 350upx;
	}

	.u-slot-value {
		background-color: orange;
		border-radius: 50%;
		width: 50upx;
		height: 50upx;
		text-align: center;
		line-height: 50upx;
	}
</style>
